<script lang="ts" setup>
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui'; import { $t } from '@vben/locales';
import { notification, Popconfirm, Space, Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUsers, deleteUser } from '#/api/abp/user';
import { columns, querySchema } from './user';
import { useVbenModal } from '@vben/common-ui';
import userModal from './user-modal.vue';
import type { UserDto } from '#/api/abp/user/types';

import { useAccess } from '@vben/access';

const { hasAccessByCodes } = useAccess();
const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      showCollapseButton: false,
      allowClear: true,
    },
  },
  schema: querySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  // 日期选择格式化
  // fieldMappingTime: [
  // [
  //   'createTime',
  //   ['params[beginTime]', 'params[endTime]'],
  //   ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
  // ],
  // ],
};
const gridOptions: VxeGridProps = {
  checkboxConfig: {
    // 高亮
    highlight: true,
    // 翻页时保留选中状态
    reserve: true,
  },
  columns,
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const res = await getUsers({
          skipCount: (page.currentPage - 1) * page.pageSize,
          maxResultCount: page.pageSize,
          ...formValues,
        });
        return {
          total: res.totalCount,
          items: res.items
        };
      }
    }
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    // refresh: true,
    zoom: true,
  },
  // scrollY: {
  //   enabled: true,
  //   gt: 0,
  // },
  rowConfig: {
    keyField: 'id',
  },
  id: 'system-user',
};
const [BasicTable, tableApi] =
  useVbenVxeGrid({
    formOptions,
    gridOptions
  });
const [UserModal, modalApi] = useVbenModal({
  connectedComponent: userModal,
});
async function handleAdd() {
  modalApi.setData({});
  modalApi.open();
}
async function handleEdit(record: UserDto) {
  modalApi.setData({ id: record.id });
  modalApi.open();
}
function handleDelete(id: any) {
  deleteUser(id).then(() => {
    notification['success']({
      duration: 2,
      message: $t('pages.common.deleteSuccess'),
    });
    tableApi.query();
  });

}

</script>
<template>
  <Page :auto-content-height="true">
    <BasicTable table-title="用户列表">
      <template #toolbar-tools>
        <Button class="mr-2" v-if="hasAccessByCodes(['AbpIdentity.Users.Create'])" type="primary" @click="handleAdd">
          新增用户
        </Button>
        <!-- <Button class="mr-2" type="primary" @click="reloadTable">
          刷新
        </Button> -->
      </template>
      <template #action="{ row }">
        <Space>
          <Button  v-if="hasAccessByCodes(['AbpIdentity.Users.Update'])" class="ml-2" size="small" type="primary" :ghost="true" @click="handleEdit(row)">{{
            $t('pages.common.edit') }}</Button>
          <Popconfirm title="确定删除?" @confirm="handleDelete(row.id)">
            <Button v-if="hasAccessByCodes(['AbpIdentity.Users.Delete'])" class="ml-2" size="small" :danger="true" :ghost="true" type="primary">{{ $t('pages.common.delete')
            }}</Button>
          </Popconfirm>
        </Space>
      </template>
    </BasicTable>
    <UserModal @reload="tableApi.query()" />
  </Page>
</template>
